<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .page {
            width: 800px;
            height: 80vh;
            margin: 0 auto;
            border-left: 1px solid #666;
            border-right: 1px solid #666;
        }

        .nav span {
            display: inline-block;
            width: 32%;
            text-align: center;
        }

        .content {
            width: 100%;
            height: 500px;
            display: none;
        }
    </style>
</head>

<body>
    <div class="page">
        <h1>发现酷玩</h1>
        <div class="nav">
            <span class="nav-btn" dindex="0">最新</span>
            <span class="nav-btn" dindex="1">最热</span>
            <span class="nav-btn" dindex="2">品类</span>
        </div>
        <div class="content zui-xin">最新</div>
        <div class="content zui-re">最热</div>
        <div class="content pinlei">
            <div class="div-pl"></div>
        </div>
    </div>
    <script src="../0505/js/jq.js"></script>
    <script>
        $(function () {

            // 最新、最热、品类的切换，先让三个大的div都不显示，在js中默认显示第一个，点击哪个span就显示对应的div
            var divList = $('.content');
            // eq 是等于几 括号里跟上下标 用来选择原色集合中的某一个元素
            divList.eq(2).show(); // 第一个div展示

            $('.nav-btn').click(function () {
                var dindex = $(this).attr('dindex');
                divList.hide();
                divList.eq(dindex).show()

            })

            // 渲染页面
            renderPage();

            function renderPage() {
                $.ajax({
                    url: 'http://localhost:3000/play/category',
                    type: 'GET',
                    success: function (res) {
                        // console.log(res);
                        var arr0 = res[0];
                        var arr1 = res[1];
                        console.log(arr0);
                        // 生活是第一个模块，先写生活模块
                        var str1 = "<div><p>" + arr0.title + "</p>";
                        $.each(arr0.list, function (i, t) {
                            if(i<8) {
                                str1 += `
                                        <img src=car_${i+1}.png />
                                       <div>
                                        ${t.productName}
                                        <span>（${t.nums}）</span>
                                        </div>
                                `
                            }else {
                                str1 += `
                                       <div>
                                        ${t.productName}
                                        <span>（${t.nums}）</span>
                                        </div>
                                `
                            }
                        })
                        str1 += '</div>';
                        $('.div-pl').html(str1);
                    }
                })
            }

        })
    </script>
</body>

</html>